<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>妙笔千山播放器</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="player"></div>

    <div class="btn">
        <!-- 播放按钮 -->
        <div class="btn-play">
            <audio src="audio/music.mp3"></audio>
        </div>
    </div>

    <script>
        // 1. 获取播放按钮和音频文件
        var oBtn = document.querySelector(".btn-play");
        var oAudio = document.querySelector("audio");
        var oPlayer = document.querySelector(".player");

        // 2. 点击播放按钮
        oBtn.onclick = function(){
            // 2.1 当音频是暂停的时候,音频播放,图片改成播放的图片
            if( oAudio.paused ){
                oAudio.play();
                oBtn.style.backgroundImage = "url(images/play.png)";
                oPlayer.style.animationPlayState = "running";
            }else{
                // 2.2 当音频是播放的时候,音频暂停,图片改成暂停的图片
                oAudio.pause();
                oBtn.style.backgroundImage = "url(images/pause.png)";
                oPlayer.style.animationPlayState = "paused";
            }
        }
    </script>
</body>
</html>